<template>
  <visitor-communal active="visitor-model-trial">
    <n-flex vertical class="mol-main"
            :class="[{'mol-main-bg-1': activeKey==='identifier'},
                    {'mol-main-bg-2': activeKey==='damage'},
                    {'mol-main-bg-3': activeKey==='fire'}]">
      <n-grid cols="4" x-gap="12" class="mol-header">
        <n-gi class="item-center mol-log">
          <n-icon :component="MachineIcon" />Machine
        </n-gi>
        <n-gi span="2">
          <ul class="clear_float ">
            <li class="mol-li"
                :class="{'mol-li-action':activeKey==='identifier'}"
                @click="activeKey='identifier'">电线杆塔编号识别</li>
            <li class="mol-li"
                :class="{'mol-li-action':activeKey==='damage'}"
                @click="activeKey='damage'">电线杆塔缺陷识别</li>
            <li class="mol-li"
                :class="{'mol-li-action':activeKey==='fire'}"
                @click="activeKey='fire'">周围火源识别</li>
          </ul>
        </n-gi>
        <n-gi class="item-center">
          <div class="mol-re">
            <n-icon :component="BonfireIcon" :size="32"/>
          </div>
        </n-gi>
      </n-grid>
      <n-flex vertical justify="center" class="mol-cont">
        <Identify title='电线杆塔编号识别' upUrl="/api/model/upload" v-if="activeKey==='identifier'"></Identify>
        <Identify title='电线杆塔缺陷识别' upUrl="/api/model/upload" v-if="activeKey==='damage'"></Identify>
        <Identify title='周围火源识别' upUrl="/api/model/upload" v-if="activeKey==='fire'"></Identify>
      </n-flex>
    </n-flex>
    <n-flex class="mol-result">
      <n-grid cols="5" x-gap="12">
        <n-gi span="2">
          <h3> 检 测 报 告 </h3>
          <img :src="baseSrc+'faq_graphic.jpg'" width="560" alt="跑了~">
        </n-gi>
        <n-gi span="3">
          <n-empty description="你什么也找不到">
            <template #extra>
              <n-button size="small">
                看看别的
              </n-button>
            </template>
          </n-empty>
        </n-gi>
      </n-grid>
    </n-flex>
  </visitor-communal>
</template>

<script>
import {ref} from "vue";
import visitorCommunal from "@/components/communal/visitor-communal.vue";
import Identify from "@/components/utils/Identify.vue";
import {ApertureSharp as MachineIcon,
  Bonfire as BonfireIcon
} from '@vicons/ionicons5'
export default {
  name: "VisitorModelTrialView",
  components: {
    visitorCommunal,Identify
  },
  setup(){
    const BaseSrc = '/src/assets/images/system/';
    let activeKey = 'identifier'
    return {
      MachineIcon,BonfireIcon,
      baseSrc: ref(BaseSrc),
      activeKey: ref(activeKey),
    }
  }
}
</script>

<style lang="scss" scoped>
.mol-main{
  position: relative;
  height: 100vh;
  width: 100%;
  transition: 0.5s 0s ease all;
  background: repeating-linear-gradient(to bottom ,#80d0c7,#41889a 30rem);
}
.mol-main-bg-1{
  background-image: url("/src/assets/images/carts/pexels-kindel-media-9889059.jpg") ;
  background-origin: content-box;
  background-repeat: no-repeat;
  background-size: 100%;
}
.mol-main-bg-2{
  background-image: url("/src/assets/images/carts/pexels-mian-rizwan-8450034.jpg") ;
  background-origin: content-box;
  background-repeat: no-repeat;
  background-size: 100%;
}
.mol-main-bg-3{
  background-image: url("/src/assets/images/carts/pexels-photo-9989508.jpeg");
  background-origin: content-box;
  background-repeat: no-repeat;
  background-size: 100%;
}
.mol-header{
  width: 100%;
  padding: 0;
  margin: 0;
  height: 4.2rem;
  border-bottom: 1px solid #f3f3f355;
}
ul{
  position: relative;
  color: #fff;
  .mol-li{
    text-align: center;
    background: #f2f2f200;
    margin: 0 1.2rem;
    float: left;
    font-size: 15px;
    &:hover{
      color: #1c5a80;
      cursor: pointer;
    }
  }
}
.mol-li-action{
  color: #1c5a80;
}
.mol-log{
  color: #000;
  font-size: 28px;
  font-weight: bold;
}
.mol-re{
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #fff;
}
.mol-cont{
  position: relative;
  //bottom: 5vh;
  height: 81vh;
  padding: 2rem;
  margin: 0;
  &-body{
    width: 100%;
    height: 100%;
  }
}
.mol-result{
  margin-top: 2rem;
  width: 100%;
  h3{
    text-align: center;
    font-size: 36px;
    font-weight: bold;
  }
}
</style>